<template>
  <div class="rain-alarm-box">
    <div class="little-title m-b-mini">
      降雨告警
    </div>
    <div class="d-flex-c flex-1">
      <div
        v-for="(item,index) in rainAlarmList"
        :key="index"

        class="rain-alarm-item d-flex-c jc-c ai-c"
      >
        <div class="flex-ai-c">
          <div
            class="ff-agencyyr rain-alarm-value c-pointer"
            :class="item.class ? item.class :' c-text-blue'"
            @click="openStatusDetailModal(item)"
          >
            {{ handleDataShow(rainAlarmData[item.key]) }}
          </div>
          <span class="f-12 c-white">个</span>
        </div>
        <div class="f-14 c-white">
          {{ item.label }}
        </div>
      </div>
    </div>
    <DetailModal
      v-if="detailVisible"
      :visible="detailVisible"
      :columns="columns"
      :load-function="getDetailData"
      @close="detailVisible=false"
      width="1236px"
    />
  </div>
</template>

<script>
import DetailModal from '@/views/business/ysqjcdp/components/modal/detail-modal.vue'
export default {
  name: 'RainAlarm',
  components: { DetailModal },
  data () {
    return {
      rainAlarmList: [
        { label: '今日以来 超100mm', class: 'red', key: 'jrcont', type: '1', limit: 100 },
        { label: '近1h 超30mm', key: 'cont1h', type: '3', limit: 30 },
        { label: '近3h 超60mm', key: 'cont3h', type: '4', limit: 60 },
        { label: '近6h 超80mm', key: 'cont6h', type: '5', limit: 80 }
      ],
      rainAlarmData: {},
      detailVisible: false,
      detailType: null,
      columns: [
        { title: '站码', field: 'stcd', width: 80 },
        { title: '测站名称', field: 'stnm', minWidth: 100 },
        { title: '雨量值', field: 'rainValue', width: 90 },
        { title: '站址', field: 'stlc', minWidth: 100 },
        { title: '站类', field: 'sttp', width: 80 },
        { title: '所属行政区名', field: 'addvnm', width: 120 },
        { title: '经度', field: 'lgtd', width: 120 },
        { title: '纬度', field: 'lttd', width: 120 }
      ]
    }
  },
  mounted () {
    this.fetchAlarmData()
  },
  methods: {
    async fetchAlarmData () {
      const data = await this.$request.formDataPost(window.outApiBk + 'foreign/getqygj', {}, true, 'POST', true)
      this.rainAlarmData = data
    },
    handleDataShow (value) {
      return value ?? '-'
    },
    openStatusDetailModal (type) {
      this.detailType = type
      this.detailVisible = true
    },
    async getDetailData () {
      const data = await this.$request.formDataPost(window.outApiHw + 'hw-api/outInterface/selectProductRains',
        { type: this.detailType.type })
      return data?.filter(item => Number(item.rainValue) > this.detailType.limit) ?? []
    }
  }
}
</script>

<style lang="scss" scoped>
.rain-alarm-box {
  width: 220px;
  // max-height: 220px;
  .rain-alarm-item {
    width: 100%;
    flex: 1;
    // height: 56px;
    background-image: url("~@/assets/images/ysqjcdp/rain-alarm-bg.png");
    background-size: 100% 100%;

    &:not(:last-child) {
      margin-bottom: 6px;
    }

    .rain-alarm-value {
      line-height: 20px;
      font-size: 20px;
      font-weight: 700;
      text-align: center;
      margin-bottom: 6px;
      margin-right: 2px;

      &.red {
        color: #ff5a69;
      }
    }
  }
}
</style>
